<template>
<div class="tool-nav">
      <el-config-provider :locale="zhCn">
      <el-date-picker
        v-model="month"
        type="month"
        size="small"
        placeholder="时间"
      />
      </el-config-provider>
      <el-input v-model="searchId" class="searchInput" placeholder="员工号"></el-input>
              <el-button @click="search" type="primary" >
                <el-icon class="icon-button" ><Search /></el-icon>
                <p>搜索</p>
              </el-button>
              <el-button @click="fresh" type="primary">
                <el-icon class="icon-button" ><refresh-right /></el-icon>
                <p>更新</p>
              </el-button>
</div>
    <el-table :data="tableData" stripe style="width: 100%;margin-top: 10px;">
        <el-table-column prop="id" label="员工号" width="175" />
        <el-table-column prop="month" label="时间" width="175" />
        <el-table-column prop="baseSalary" label="基本工资" width="175" />
        <el-table-column prop="commission" label="每桶提成" width="175"  />
        <el-table-column prop="amount" label="送水数量" width="175" />
        <el-table-column prop="netPayment" label="实发工资" width="175" />
    </el-table>
    <el-pagination class="pagination"
                   v-model:current-page="pageNo"
                   page-size="pageSize"
                   :page-count="total"
                   @current-change="currentChange"
                   background layout="  prev, pager, next " :total="total" />
</template>

<script>
import zhCn from'element-plus/lib/locale/lang/zh-cn'
import axios from "axios";
    export default {
      data() {
        return {
          tableData: [],
          zhCn,
          month:null,
          searchId:null,
          total:5,
          pageSize:10,
          pageNo:1,
          flag:0,
        }

      },
      methods: {
        dataChange(data){
          for (let i = 0; i < data.length; i++) {
            let month = parseInt(data[i].month);
            month = (2001+month/12).toFixed(0)+"-"+month%12;
            console.log(month);
            data[i].month=month;
          }
          return data;
        },
        currentChange(){
          if(this.flag == 0)
            this.fresh();
          else
            this.search();

        },
        getDefault(){
          let that = this;
          that.flag = 0;
          axios.post("/Salary/getDefault",{
                pageSize:that.pageSize,
                pageNo:1,
              }).then(response => {
                that.tableData = that.dataChange(response.list);
                that.total = response.pages;
            console.log("The total is "+response.total)
              }).catch(function (error) { // 请求失败处理
                console.log(error);
              });
        },
        search() {
          let that = this;
          that.flag = 1;
          let m=-1,i=-1;
          if(that.month != null)
            m = (that.month.getFullYear()-2001)*12+that.month.getMonth()+1;
          if(that.searchId != null && that.searchId !=0)
            i = that.searchId;
          let params = {
            month:m,
            id:i,
            pageSize:that.pageSize,
            pageNo:that.pageNo,
          };
         axios.post("/Salary/getSalary", params ).then(response => {
           that.tableData = that.dataChange(response.list);
           that.total = response.pages;
           console.log("The total is "+response.total)
          }).catch(function (error) { // 请求失败处理
           console.log(error);
         });
        },
        //刷新工资
        fresh() {
        axios.post("/Salary/Refresh")
          .then(response =>{
            console.log(response);
          })
        },

      },
      created() {
        this.getDefault();
      },
    }

</script>
<style>
.tool-nav{
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
}
.icon-button{
  margin-right: 5px;
}
.searchInput{
  width: 180px;
  margin-right: 12px;
  margin-left: 12px;
}
.pagination{
  position: absolute;
  left: 50%;
  top: 560px;
}
</style>